/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */

//获取省份并且渲染
// 给省份绑定change事件  获取城市
// 给城市绑定change事件
const province = document.querySelector('.province')
const city = document.querySelector('.city')
const area = document.querySelector('.area')

axios({
    url: "http://hmajax.itheima.net/api/province",
}).then(res => {
    console.log(res);
    const list = res.data.list
    province.innerHTML = `<option>省份</option>` + list.map(ele => {
        return `
            <option value='${ele}'>${ele}</option>
            `
    }).join('')
})

let pname
province.addEventListener('change', function (e) {
    console.log(this.value);
    pname = this.value
    axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: {
            pname
        }
    }).then(res => {
        const list = res.data.list
        area.innerHTML = `<option>地区</option>`

        city.innerHTML = `<option>城市</option>` + list.map(ele => {
            return `
             <option value='${ele}'>${ele}</option> `
        }).join('')
    })
})


city.addEventListener('change', function (e) {
    console.log(this.value);
    cname = this.value
    axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
            pname,
            cname
        }
    }).then(res => {
        const list = res.data.list
        area.innerHTML = list.map(ele => {
            return `
             <option value='${ele}'>${ele}</option> `
        }).join('')
    })
})



/**
 * 目标2：收集数据提交保存
 *  2.1 监听提交的点击事件
 *  2.2 依靠插件收集表单数据
 *  2.3 基于axios提交保存，显示结果
 */
const feedback = document.querySelector('.feedback')
// 利用await   强制等待 promise  正确的结果！！！ 
document.querySelector('.submit').addEventListener('click', function () {
    const form = document.querySelector('.info-form')
    const formData = serialize(form, { hash: true, empty: true })
    console.log(formData);
    axios({
        url: 'http://hmajax.itheima.net/api/feedback',
        method: "POST",
        data: formData
    }).then(res => {
        alert(res.data.message)
    }).catch(err => {
        alert(err.response.data.message);
    })

})


